import React,{PureComponent} from 'react'
import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import {LoginWrapper,LoginBox,Input,Button} from './style'
import {actionCreators} from './store'
//PureComponent必须和immutable结合使用
class Login extends PureComponent{
    //只有和数据相关的组件才会重新渲染
    
    render(){
        const { loginStatus } =this.props;
        if(!loginStatus){
            return (
                <LoginWrapper>
                    <LoginBox>
                        <Input placeholder="账号" ref={(input)=>{this.account=input}}/>
                        <Input placeholder="密码" type="password" ref={(input)=>{this.password=input}}/>
                        <Button onClick={()=>this.props.login(this.account,this.password)}>登录</Button>
                    </LoginBox>
                 </LoginWrapper>
             )
        }else{
            return <Redirect to='/' />
        }   
    }
}
const mapState=(state)=>({
    loginStatus:state.getIn(['login','login'])
})
const mapDispatch=(dispatch)=>({
    login(accountElem,passwordElem){
        dispatch(actionCreators.login(accountElem.value,passwordElem.value))
    }
})

export default connect(mapState,mapDispatch)(Login);